<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人账户注册</title>
    <style>
        .top {
            /* position: relative; */
            height: 45px;
            border-bottom: 1px solid #e6e6e6;
            margin-bottom: 10px;
        }

        .top .ul1 {
            margin: 0 auto;
            width: 480px;
        }

        .li1 {
            float: left;
            width: 170px;
            padding-left: 70px;
            line-height: 45px;
        }

        .li2 {
            float: left;
            width: 170px;
            padding-left: 70px;
            line-height: 45px;
            color: #ff7300;
            border-bottom: 1px solid #ff7300;
        }

        .ul1 a {
            text-decoration: none;
            list-style: none;
            color: black;
            font-weight: bold;
        }

        .word {
            text-align: center;
            font-weight: bold;
            margin-bottom: 30px;
            font-size: 13px;
        }

        .center {
            text-align: center;
        }


        label {
            color: gray;
            font-size: 12px;
            margin: 17px 0;
            text-align: right;
        }

        .form {
            display: grid;
            grid-template-columns: 70px 350px;
            grid-template-rows: repeat(6, 65px);
            margin-left: 580px;
        }

        input {
            display: inline-grid;
            border: 1px solid lightgray;
            width: 270px;
            height: 38px;
            padding: 0 12px;
            margin: 6px 5px 15px 8px;
            outline: none;
            text-align: left;
        }


        label::before {
            content: "*";
            margin-right: 4px;
            color: red;
        }

        .browsers {
            width: 130px;
            grid-column: 2/2;
            grid-row: 4/5;
        }

        .a {
            display: grid;
            width: 120px;
            grid-column: 2/2;
            grid-row: 4/5;
            margin-left: 160px;
        }

        [id="checkbox"] {
            display: grid;
            width: 20px;
            height: 20px;
            grid-row: 5/6;
            grid-column: 2/2;
            outline: 0;
            border: none;
            border-radius: 0%;
            background: #D7B1D7;
        }

        .bottom {
            grid-row: 5/5;
            grid-column: 2/2;
            font-size: 5px;
            margin-left: 25px;
            text-align: left;
            padding: 0 0 0 10px;
        }

        .bottom2 {
            grid-row: 5/5;
            grid-column: 2/2;
            font-size: 5px;
            margin-left: 25px;
            margin-top: 20px;

        }

        .bottom a {
            color: #ff6000;
            text-decoration: none;
            margin-left: 5px;
            grid-row: 6/6;
            grid-column: 1/2;
        }

        .last button {
            position: relative;
            margin: 60px 0 0 100px;
            padding: 0 20px;
            width: 120px;
            height: 45px;
            background-color: #ff6000;
            border: none;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="top">
        <ul class="ul1">
            <a href="./demo02.html">
                <li class="li1">企业账户注册</li>
            </a>
            <a href="./demo03.html">
                <li class="li2">个人账户注册</li>
            </a>
        </ul>
    </div>
    <p class="word">无企业营业执照的个人用户请注册个人账户。权益如下：做个人实名认证；作为买家身份采购；</p>
    <div class="center">
        <form action="#" onsubmit="return false" autocomplete="on" class="form">
            <label for="username">会员名:</label><input type="text" placeholder="设置会员名" style="font-size: 10px;" autofocus
                required>
            <label for="password">登录密码:</label><input type="text" placeholder="设置你的登录密码" style="font-size: 10px;"
                autofocus required>
            <label for="true-password">密码确认:</label><input type="text" placeholder="请再次输入你的登录密码"
                style="font-size: 10px;" autofocus required>
            <label for="telephone-number">手机号码:</label>
            <input list="browsers" class="browsers">
            <datalist id="browsers">
                <option value="中国大陆       +86"></option>
                <option value="中国台湾       +886"></option>
                <option value="马来西亚       +60"></option>
                <option value="新加坡         +65"></option>
                <option value="日本            +81"></option>
                <option value="韩国            +82"></option>
                <option value="美国            +1"></option>
                <option value="加拿大        +1"></option>
            </datalist><input type="text" name="" class="a">
            <input type="checkbox" id="checkbox" value="false">
            <p class="bottom">创建网站账号的同时，我同意遵守：<br>
                <a href="#" class="bottom2">《阿里巴巴服务条款》</a>及<a href="#">《隐私声明》</a>
            </p>
            <div class="last">
                <button type="submit">同意并注册</button><br>
            </div>
        </form>
    </div>

    <script>
        let input = document.querySelector(' form input');
        input.addEventListener('input', function () {
            let regx = /^[a-zA-Z][_0-9a-zA-Z]{5,15}$/;
            if (regx.test(input.value)) {
                input.style.border = '1px solid lightgrey';
            } else {
                input.style.border = '1px solid orange  ';
            }
        })
    </script>
</body>


</html>